import React from 'react'
import { Button, Spin, Alert, Carousel } from 'antd'
// import {ArrowLeftOutlined} from '@ant-design/icons';

import styles from './goodsDetail.scss'
export default class getGoodsDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      goodsInfo: {},
      isLoading: true,
    }
  }
  componentDidMount() {
    this.getGoodsDetail();
  }
  render() {
    return <div>
      <Button
        type='primary'
        style={{ margin: '10px 0' }}
        onClick={this.goBacck}>
        返回商品列表页</Button>
      {this.state.isLoading ? this.loading() : this.renderInfo()}
    </div>
  }
  renderInfo = () => {
    return <div>
      <Carousel 
      effect="fade" 
      autoplay
      >
        {this.state.goodsInfo.pics.map((item,index)=>{
          return <div key={item.pics_id}>
            <div className={styles.carousel} >
            <img src={item.pics_big} alt=""/>
            </div>
          </div>
        })}
      </Carousel>
      <h2>{this.state.goodsInfo.goods_name}</h2>
      <div dangerouslySetInnerHTML={{ __html: this.state.goodsInfo.goods_introduce }} ></div>
    </div>
  }
  loading = () => {
    return <Spin tip="Loading...">
      <Alert
        message="正在请求商品列表"
        description="精彩内容马上呈现..."
        type="info"
      />
    </Spin>
  }
  getGoodsDetail = () => {
    const url = `https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=${this.props.match.params.goods_id}`
    fetch(url).then(res => {
      return res.json()
    }).then(data => {
      console.log(data.message)
      if (data.meta.status == 200) {
        this.setState({
          isLoading: false,
          goodsInfo: data.message
        })
      }
    })
  }
  goBacck = () => {
    this.props.history.go(-1)
  }
}